<template>
    <div class="main">
        <cvue-dialog
        :dialogVisible='dialogVisible'
        title='新增教职工'
        :isShowFoot='true'
        dialogWidth='60%'
        @handleOpen='getDetail'
        @closeDialog='closeDialog'
        @confirmDialog='confirmDialog'
        @handleClose='closeDialog'>
        <div class="dialog-body" slot="dialogBody">
            <el-tabs v-model='activeCard' type="card">
                <el-tab-pane label="基本信息" name="first">
                    <el-form inline label-width="130px">
                        <el-form-item label="人脸图片">
                             <upload ref="upload"
                            :accept="['.png','.jpg','.jpeg']"
                            :fileSize="{size:1024*1024*10,messge:'只能上传10m以内的图片'}">
                            </upload>
                        </el-form-item>
                        <el-form-item label="教职工姓名" required>
                            <el-input class="formWidth" type="text"  v-model="name" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select class="formWidth" v-model="gender" placeholder="请选择">
                                <el-option label="男" value="true">
                                </el-option>
                                <el-option label="女" value="false">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="手机号" required>
                            <el-input class="formWidth" type="text" v-model="cellPhoneNum"  maxlength="11" @blur="userDetail()"></el-input>
                            <p class="isUser" v-if="isLogin"><i class="el-icon-warning"></i>{{errorMsg}}</p>
                        </el-form-item>
                        <el-form-item label="教职工号">
                            <el-input class="formWidth" type="text"  v-model="jobNumber" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="国籍/地区">
                            <el-input class="formWidth" type="text" v-model="nationality" maxlength="20"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="证件类型">
                            <el-select class="formWidth" v-model="idTypeCode" placeholder="请选择">
                                <el-option label="身份证" value="1">
                                </el-option>
                                <el-option label="护照" value="2">
                                </el-option>
                                <el-option label="其他" value="3">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号">
                            <el-input class="formWidth" type="text" v-model="idNumber" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="家庭住址">
                            <el-input class="formWidth" type="text" v-model="familyAddress" maxlength="30"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="所属部门">
                            <treeselect class="treeHeight" :maxHeight='120' v-model="deptIds" :multiple="true"  :normalizer='normalizer' placeholder='请选择部门' :options="deptList" />
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-input class="formWidth" type="text" v-model="jobPosition" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="在职状态">
                            <el-select class="formWidth" v-model="status" placeholder="请选择">
                                <el-option v-for="(item, index) in onJobState" :key='index' :label="item.name" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="教授科目">
                            <el-select class="formWidth" v-model="subJectIds" multiple collapse-tags  placeholder="请选择">
                                <el-option v-for="(item, index) in subjectList" :key="index" :label="item.stageName + '-' + item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="教授班级">
                            <el-select class="formWidth" v-model="teachClass" multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in classList" :key="index" :label="item.gradeName+item.className" :value="item.classId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班主任班级">
                            <el-select class="formWidth" v-model="marstClass" multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in classList" :key="index" :label="item.gradeName+item.className" :value="item.classId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="账号信息">
                            <el-input class="formWidth" disabled type="text" v-model="cellPhoneNum"></el-input>
                        </el-form-item>
                        <el-form-item label="工作记录">
                            <el-input class="formWidth" type="textarea" v-model="workRecord" maxlength="200"></el-input>
                        </el-form-item>
                        <el-form-item label="备注信息">
                            <el-input class="formWidth" type="textarea" v-model="remarks" maxlength="200"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="扩展信息" name="second">
                    <el-form inline label-width="130px">
                        <el-form-item label="出生日期">
                            <el-date-picker
                                class="formWidth"
                                v-model="birthDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="出生地">
                            <el-input class="formWidth" type="text" v-model="birthPlace"></el-input>
                        </el-form-item>
                        <el-form-item label="籍贯">
                            <el-input class="formWidth" type="text" v-model="nativePlace"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="民族">
                            <el-input class="formWidth" type="text" v-model="nationCode"></el-input>
                        </el-form-item>
                        <el-form-item label="学历">
                            <el-input class="formWidth" type="text" v-model="eduBackgroundCode"></el-input>
                        </el-form-item>
                        <el-form-item label="学位">
                             <el-input class="formWidth" type="text" v-model="academicDegreeCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="毕业院校">
                            <el-input class="formWidth" type="text" v-model="graduationSchool"></el-input>
                        </el-form-item>
                        <el-form-item label="所有专业">
                            <el-input class="formWidth" type="text" v-model="specialty"></el-input>
                        </el-form-item>
                        <el-form-item label="学制">
                            <el-input class="formWidth" type="text" v-model="schoolingLengthCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="政治面貌">
                            <el-input class="formWidth" type="text" v-model="politicalStatusCode"></el-input>
                        </el-form-item>
                        <el-form-item label="婚姻状况">
                            <el-input class="formWidth" type="text" v-model="maritalStatusCode"></el-input>
                        </el-form-item>
                        <el-form-item label="健康状况">
                            <el-input class="formWidth" type="text" v-model="healthStatusCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="入学年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="enrolmentDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="毕业年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="graduationDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="职称">
                            <el-input class="formWidth" type="text" v-model="positionTitleCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form label-width="130px">
                        <el-form-item label="简介">
                            <el-input :rows=3 type="textarea" v-model="profile"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="详细信息" name="third">
                    <el-form inline label-width="130px">
                        <el-form-item label="现居住地址">
                            <el-input class="formWidth" type="text" v-model="residentAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码">
                            <el-input class="formWidth" type="text" v-model="postalCode"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input class="formWidth" type="text" v-model="email"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="参加工作年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="firstJobBeginDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="进本校年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="joinThisSchoolDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="教职工来源">
                           <el-input class="formWidth" type="text" v-model="teacherSourceCode"></el-input>
                        </el-form-item>
                        <el-form-item label="教职工类别">
                            <el-input class="formWidth" type="text" v-model="teacherTypeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="是否在编">
                            <el-switch
                                v-model="permanentEmpFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                     <el-form inline label-width="130px">
                        <el-form-item label="用人形式">
                            <el-input class="formWidth" type="text" v-model="employModeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="签订合同情况">
                            <el-input class="formWidth" type="text" v-model="contractTypeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="信息技术能力">
                            <el-input class="formWidth" type="text" v-model="infoTechAbilityCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                       <el-form-item label="是否参加基层服务项目">
                            <el-switch
                                v-model="joinBasicServiceProjectFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                        <el-form-item label="参加基层服务项目起始年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="basicServiceProjectBeginDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="参加基层服务项目结束年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="basicServiceProjectEndDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                     <el-form inline label-width="250px">
                        <el-form-item label="是否全日制师范类专业毕业">
                            <el-switch
                                v-model="fullTimeNormalSchoolGraduateFlag"
                            >
                            </el-switch>
                        </el-form-item>
                       <el-form-item label="是否受过特教专业培养培训">
                            <el-switch
                                v-model="trainedForSpecialEduFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否有特殊教育从业证书">
                            <el-switch
                                v-model="hasSpecialEduEmpCertifFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                        <el-form-item label="是否特级教师">
                            <el-switch
                                v-model="specialGradeTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                       <el-form-item label="是否县级及以上骨干教师">
                            <el-switch
                                v-model="countyLevelPlusCoreTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否心理健康教育教师">
                            <el-switch
                                v-model="mentalHealthTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否属于免费（公费）师范生">
                            <el-switch
                                v-model="govFundsNormalSchoolStudentFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        </cvue-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import cvueDialog from '@/components/cvue-dialog'
import upload from '@/components/upload2'
export default {
    name: 'addList',
    components: {
        cvueDialog, upload
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            normalizer (node) {
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children.length > 0 ? node.children : 0
                }
            },
            name: '', // 名字
            formerName: '', // 曾用名
            gender: 'true', // 性别
            cellPhoneNum: '', // 手机号
            jobNumber: '', // 教职工号
            nationality: '', // 国籍/地区
            idTypeCode: '', // 证件类型
            idNumber: '', // 证件号
            familyAddress: '', // 家庭住址
            deptIds: [], // 部门
            jobPosition: '', // 职务
            status: 10, // 在职状态
            subJectIds: [], // 教授科目
            teachClass: [], // 教授班级
            marstClass: [], // 担任班主任班级
            teacherClassMappingDtos: [],
            numberInfo: '', // 账号信息
            workRecord: '', // 工作记录
            remarks: '', // 备注
            birthDate: '', // 出生日期
            birthPlace: '', // 出生地
            nativePlace: '', // 籍贯
            nationCode: '', // 民族
            eduBackgroundCode: '', // 学历
            academicDegreeCode: '', // 学位
            graduationSchool: '', // 毕业院校
            specialty: '', // 所学专业
            schoolingLengthCode: '', // 学制    
            politicalStatusCode: '', // 政治面貌
            maritalStatusCode: '', // 婚姻状况
            healthStatusCode: '', // 健康状况
            enrolmentDate: '', // 入学年月
            graduationDate: '', // 毕业年月
            positionTitleCode: '', // 职称
            profile: '', // 简介
            residentAddress: '', // 现居住地址
            postalCode: '', // 邮政编码
            email: '', // 电子邮箱
            firstJobBeginDate: '', // 参加工作年月    
            joinThisSchoolDate: '', // 进本校年月
            teacherSourceCode: '', // 教职工来源
            teacherTypeCode: '', // 教职工类别
            permanentEmpFlag: '', // 是否在编
            employModeCode: '', // 用人形式
            contractTypeCode: '', // 签订合同情况
            infoTechAbilityCode: '', // 信息技术能力代码
            fullTimeNormalSchoolGraduateFlag: false, // 是否全日制师范类专业毕业
            trainedForSpecialEduFlag: false, // 是否受过特教专业培养培训
            hasSpecialEduEmpCertifFlag: false, // 是否有特殊教育从业证书
            govFundsNormalSchoolStudentFlag: false, // 是否属于免费（公费）师范生
            joinBasicServiceProjectFlag: false, // 是否参加基层服务项目
            basicServiceProjectBeginDate: '', // 参加基层服务项目起始年月
            basicServiceProjectEndDate: '', // 参加基层服务项目结束年月
            specialGradeTeacherFlag: false, // 是否特级教师
            countyLevelPlusCoreTeacherFlag: false, // 是否县级及以上骨干教师
            mentalHealthTeacherFlag: false, // 是否心理健康教育教师
            activeCard: 'first', // 切换标签标识
            isLogin: false,
            errorMsg: ''
        }
    },
    computed: {
        subjectList () {
            return this.$store.state.teacher.subjectList
        },
        classList () {
            return this.$store.state.teacher.classList
        },
        deptList () {
            return this.$store.state.teacher.deptList
        },
        onJobState () {
            return this.$store.state.teacher.onJobState
        }
    },
    methods: {
         // 判断user信息
        userDetail () {
            if (!(/^1[3456789]\d{9}$/.test(this.cellPhoneNum))) {
                this.isLogin = true
                this.errorMsg = '手机号格式错误'
                return
            } else {
                this.isLogin = false
            }
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId,
                Phone: this.cellPhoneNum
            }
            this.$store.dispatch('teacher/GetTeacherList', params).then(res => {
                if (res.totalCount > 0) {
                    this.isLogin = true
                    this.errorMsg = '手机号已经存在'
                } else {
                    this.isLogin = false
                } 
            }).catch(res => {
                if (res.status == 404) {
                    this.isLogin = false
                }
            })
        },
        getDetail () {
            if (this.$refs.upload) {
                this.$refs.upload.progressList = []
            }
            Object.assign(this.$data, this.$options.data())
        },
        concatClass () {
            this.teacherClassMappingDtos = []
            this.teachClass.forEach(
                item => {
                    var flag = false
                    this.marstClass.forEach(
                        item2 => {
                            if (item == item2) {
                                flag = true
                            }
                        }
                    )
                    var obj = ''
                    if (flag) {
                        obj = {isChargeTeacher: true, isTeach: true, schoolClassId: item}
                    } else {
                        obj = {isChargeTeacher: false, isTeach: true, schoolClassId: item}
                    }
                    this.teacherClassMappingDtos.push(obj)
                }
            )
            var arr = []
            this.marstClass.forEach(
                item => {
                    var flag = true
                    this.teacherClassMappingDtos.forEach(
                        item2 => {
                            if (item == item2.schoolClassId) {
                                flag = false
                            }
                        }
                    )
                    if (flag) {
                        var obj = {isChargeTeacher: true, isTeach: false, schoolClassId: item}
                        arr.push(obj)
                    }
                }
            )
            this.teacherClassMappingDtos = this.teacherClassMappingDtos.concat(arr)
        },
        check () {
            if (!this.name) {
                this.$message({
                    message: '教职工姓名不能为空',
                    type: 'error'
                })
                return false
            }
            if (!this.cellPhoneNum) {
                this.$message({
                    message: '手机号不能为空',
                    type: 'error'
                })
                return false
            }
            if (this.isLogin) {
                return false
            }
            return true
        },
        addTeacher () {
            if (!this.check()) {
                return
            }
            this.concatClass()
            var urls = []
            this.$refs.upload.getFileList().forEach(item => {
                urls.push(item.url)
            })
            var params = {
                schoolId: this.$store.state.common.cookiesObj.schoolId,
                name: this.name, // 名字
                // formerName: '', // 曾用名
                gender: this.gender, // 性别
                faceImgUrl: urls.join(), // 头像
                cellPhoneNum: this.cellPhoneNum, // 手机号
                jobNumber: this.jobNumber, // 教职工号
                nationality: this.nationality, // 国籍/地区
                idTypeCode: this.idTypeCode, // 证件类型
                idNumber: this.idNumber, // 证件号
                familyAddress: this.familyAddress, // 家庭住址
                deptIds: this.deptIds, // 部门
                jobPosition: this.jobPosition, // 职务
                status: this.status, // 在职状态
                subJectIds: this.subJectIds, // 教授科目
                // teachClass: this.teachClass, // 教授班级
                // marstClass: this.marstClass, // 担任班主任班级
                teacherClassMappingDtos: this.teacherClassMappingDtos,
                loginName: this.cellPhoneNum, // 账号信息
                workRecord: this.workRecord, // 工作记录
                remarks: this.remarks, // 备注
                birthDate: this.birthDate, // 出生日期
                birthPlace: this.birthPlace, // 出生地
                nativePlace: this.nativePlace, // 籍贯
                nationCode: this.nationCode, // 民族
                eduBackgroundCode: this.eduBackgroundCode, // 学历
                academicDegreeCode: this.academicDegreeCode, // 学位
                graduationSchool: this.graduationSchool, // 毕业院校
                specialty: this.specialty, // 所学专业
                schoolingLengthCode: this.schoolingLengthCode, // 学制    
                politicalStatusCode: this.politicalStatusCode, // 政治面貌
                maritalStatusCode: this.maritalStatusCode, // 婚姻状况
                healthStatusCode: this.healthStatusCode, // 健康状况
                enrolmentDate: this.enrolmentDate, // 入学年月
                graduationDate: this.graduationDate, // 毕业年月
                positionTitleCode: this.positionTitleCode, // 职称
                profile: this.profile, // 简介
                residentAddress: this.residentAddress, // 现居住地址
                postalCode: this.postalCode, // 邮政编码
                email: this.email, // 电子邮箱
                firstJobBeginDate: this.firstJobBeginDate, // 参加工作年月    
                joinThisSchoolDate: this.joinThisSchoolDate, // 进本校年月
                teacherSourceCode: this.teacherSourceCode, // 教职工来源
                teacherTypeCode: this.teacherTypeCode, // 教职工类别
                permanentEmpFlag: this.permanentEmpFlag, // 是否在编
                employModeCode: this.employModeCode, // 用人形式
                contractTypeCode: this.contractTypeCode, // 签订合同情况
                infoTechAbilityCode: this.infoTechAbilityCode, // 信息技术能力代码
                fullTimeNormalSchoolGraduateFlag: this.fullTimeNormalSchoolGraduateFlag, // 是否全日制师范类专业毕业
                trainedForSpecialEduFlag: this.trainedForSpecialEduFlag, // 是否受过特教专业培养培训
                hasSpecialEduEmpCertifFlag: this.hasSpecialEduEmpCertifFlag, // 是否有特殊教育从业证书
                govFundsNormalSchoolStudentFlag: this.govFundsNormalSchoolStudentFlag, // 是否属于免费（公费）师范生
                joinBasicServiceProjectFlag: this.joinBasicServiceProjectFlag, // 是否参加基层服务项目
                basicServiceProjectBeginDate: this.basicServiceProjectBeginDate, // 参加基层服务项目起始年月
                basicServiceProjectEndDate: this.basicServiceProjectEndDate, // 参加基层服务项目结束年月
                specialGradeTeacherFlag: this.specialGradeTeacherFlag, // 是否特级教师
                countyLevelPlusCoreTeacherFlag: this.countyLevelPlusCoreTeacherFlag, // 是否县级及以上骨干教师
                mentalHealthTeacherFlag: this.mentalHealthTeacherFlag // 是否心理健康教育教师
            }
            debugger
            this.$store.dispatch('teacher/AddTeacher', params).then(
                res => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.$emit('confirmDialog')
                }
            ).catch(
                res => {
                   
                }
            )
        },
        closeDialog () {
            this.$emit('closeDialog')
        },
        confirmDialog () {
            this.addTeacher()
        }
    }
}
</script>
<style scoped>
    .main{
        background: #fff;
    }
    .searchHead{
        border-bottom: 1px solid #333;
    }
    .btnLine{
        margin: 20px 0;
    }
    .formWidth{
        display: inline-block;
        width: 176px;
    }
    .isUser{
        color: red;
        font-size: 14px;
    }
    .treeHeight{
        width:176px; 
        line-height: 16px;
    }
</style>
